
<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('dzd.quick Search Fields') })"
        >
        <el-button v-blur class="table-header-operate" :disabled="!state.currentDzdno" type="primary">
            <span class="table-header-operate-text" @click="handleJobADD">生成JOB NO</span>
        </el-button>
        <el-button v-blur class="table-header-operate" :disabled="!state.currentDzdno" type="primary">
            <span class="table-header-operate-text" @click="handleJobPrint('13')">打印JOBSHEET</span>
        </el-button>
        <el-button v-blur class="table-header-operate" :disabled="!state.currentDzdno" type="primary">
            <span class="table-header-operate-text" @click="handleJobPrint('16')">打印AMENDMENT</span>
        </el-button>
        </TableHeader>

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" >
            <template #columnPrepend>
                <el-table-column width="40" >
                    <template #default="scope">
                        <el-radio v-model="state.currentDzdno" :label="scope.row.DZDNO" @input="selectChange(scope.row)">&nbsp;</el-radio>
                    </template>
                </el-table-column>
            </template>
        </Table>
        <div v-show="state.detailData.length">
            <h2 style="margin-top:16px">应付费用</h2>
            <el-table :data="state.detailData" style="width: 100%" v-loading="state.loading">
            <el-table-column  type="expand">
                  <template #default="props">
                      <el-table :data="props.row.two" :border="false">
                          <el-table-column width="100">
                          </el-table-column>
                          <!-- <el-table-column label="对账单号" prop="MARKNO" /> -->
                          <!-- <el-table-column label="JOB NO" prop="JOBNO" /> -->
                          <el-table-column label="费用类型" prop="BILLCLASS" >
                            <template #default="scope">
                                {{state.billClass[scope.row.BILLCLASS]}}
                            </template>
                          </el-table-column>
                          <el-table-column label="往来单位" prop="CORPCODE" />
                          <el-table-column label="费用项目" prop="ITEMCODE" />
                          <el-table-column label="币别" prop="MONEYTYPE" />
                          <el-table-column label="金额" prop="MONEY" />
                          <el-table-column label="税率" prop="TAXRATE" />
                          <el-table-column label="数量" prop="ROW_NUMBER" />
                          <el-table-column label="计价单位" prop="PRICETYPE" />
                          <el-table-column label="费率" prop="RATIO" />
                          <el-table-column label="对账人" prop="DZOP" />
                          <el-table-column label="对账单日期" prop="DZDATE" />
                          <el-table-column label="JOB单制作人" prop="JOBOP" />
                          <el-table-column label="JOB单日期" prop="JOBDATE" />
                      </el-table>
                  </template>
              </el-table-column>
            <el-table-column prop="TZID" :label="t('tz.TZID')" />
            <el-table-column prop="SENDER" :label="'往来单位'" />
            <el-table-column prop="GOODSC" :label="t('tz.GOODSC')" />
            <el-table-column prop="ENAME" :label="'英文名'" />
            <el-table-column prop="CNTRNO" :label="'箱号'" />
            <el-table-column prop="PORTLOAD" :label="t('tz.PORTLOAD')" />
            <el-table-column prop="PORTDIS" :label="t('tz.PORTDIS')" />
            <el-table-column prop="PORTLOAD" :label="t('tz.PORTLOAD')" />
            <el-table-column prop="RMB" :label="'应收人民币'" />
            <el-table-column prop="USD" :label="'应收美金'" />
            <el-table-column prop="ZHDATE" :label="'实际装货时间'" />
            <el-table-column prop="SHDATE" :label="'实际卸货时间'" />
            <el-table-column prop="SALER" :label="t('tz.SALER')" />
            <el-table-column prop="SALERDEPT" :label="t('tz.SALERDEPT')" />
          </el-table>
        </div>
        <el-dialog
            :model-value="state.printShow?true:false"
            :title="state.printShow=='13'?'JOBSHEET预览':'AMENDMENT预览'"
            width="900px"
        >
            <div v-loading="state.printLoading" style="min-height: 400px">
                <doc13 v-if="state.printShow == '13'" :list="state.printData" />
                <doc16 v-if="state.printShow == '16'" :list="state.printData" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { dzd } from '/@/api/controllerUrls'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
// import PopupFormView from './popupFormView.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import doc13 from '../print/components/doc13.vue'
import doc16 from '../print/components/doc16.vue'

interface Props {
    type:Number
}
const props = defineProps<Props>()

const url = reactive({
    list: props.type == 0?'admin/dzd/job_ys':'admin/dzd/corrections',
    detail:props.type == 0?'admin/dzd/business':'admin/dzd/corrections_list'
})

const state = reactive({
    currentDzdno:'',
    detailData:[],
    loading:false,
    billClass: { '0': '正常','1':'代垫','2':'AMENDMENT' },
    printShow:'',
    printLoading:false,
    printData:[]
})

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(["edit","delete"])
console.log(new baTableApi(dzd,'_job'))
const baTable = new baTableClass(
    new baTableApi(dzd,'_job'),
    {
        pk: 'ID',
        column: [
            // { type: 'selection', align: 'center', operator: false },
            { label: t('dzd.DZDNO'), prop: 'DZDNO', show:props.type==0},
            // { label: t('dzd.JOBNO'), prop: 'JOBNO', align: 'center' },
            { label: '来往单位', prop: 'CORP', align: 'center' },
            { label: '账单类型', prop: 'AMEND', align: 'center',render:'tag',replaceValue: { '0': '正常','1':'更正' } },
            { label: '提交', prop: 'BILLTYPE', align: 'center', show:props.type==0,render:'tag', renderFormatter:(row:any)=>{
                return row.tjnum + '/' + row.totalnum
            }},
            // { label: 'JOB制单日期', prop: 'JOBDATE', align: 'center',render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
            { label: '合计人民币', prop: 'RMB', align: 'center',operator: false  },
            { label: '合计美金', prop: 'USD', align: 'center',operator: false  },
            { label: '应付人民币', prop: 'DZOP', align: 'center' ,operator: false },
            // { label: '应付美金', prop: 'YFRMB', align: 'center',operator: false  },
            { label: '折合人民币', prop: 'ZHRMB', align: 'center',operator: false },
            { label: '折合人', prop: 'DZOP', align: 'center',operator: false },
            { label: '对账日期', prop: 'DZDATE', align: 'center',render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
        ],
        dblClickNotEditColumn: [undefined, ],
        defaultOrder: { prop: 'ID', order: 'desc' },
        showComSearch:true
    },
    {
        defaultItems: [],
    },
    {
        getIndex:()=>{
            getMainTable()
            return false
        },
        onTableDblclick:(table:any)=>{
            baTable.form.operate = 'view'
            baTable.form.items = table.row
            return false
        },
        
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

const getMainTable = ()=>{
    createAxios({
        url:url.list,
        params:{},
        method:'get'
    }).then((res:any)=>{
        baTable.table.data = res.data.list
        baTable.table.total = res.data.total
        baTable.table.remark = res.data.remark
    })
}


const selectChange = (item:any)=>{
    state.loading = true
    createAxios({
        url:url.detail,
        params:{
            AMEND: props.type==0? item.AMEND:undefined,
            DZDNO: item.DZDNO
        }
    }).then((res:any)=>{
        state.detailData = res.data.list
        state.loading = false
    })
}


const handleJobADD = ()=>{
    // console.log(state.currentDzdno)
    createAxios({
        url:'admin/dzd/add_job',
        method:'get',
        params:{
            dzno:state.currentDzdno
        }
    }).then(()=>{
        ElMessage({
            message:'生成JOB NO成功！'
        })
        state.currentDzdno = ''
        state.detailData = []
        getMainTable()
    })
}

const handleJobPrint = (doc:string)=>{
    state.printLoading = true
    state.printShow = doc
    state.printData = []
    createAxios({
      url:'admin/dzd/print_z',
      params:{
        type:doc,
        tzid:state.currentDzdno
      }
    }).then((res:any)=>{
        state.printLoading = false
        state.printData = res.data
    })
}

</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, useProp } from 'element-plus'
import createAxios from '/@/utils/axios'
export default defineComponent({
    name: 'dzd',
})
</script>

<style scoped lang="scss"></style>
